/**
 * Created by 35894 on 2017/9/5.
 *
 * 将使用该指令的元素变为绝对定位可拖拽的元素。
 * 使用时直接将该指令作为元素的一个attribute,
 * 同时需要提供以下两个属性:
 * init-pos-x:初始横坐标
 * init-pos-y:初始纵坐标
 *
 * 使用举例:
 * <div mks-draggable init-pos-x='50' init-pos-y='50'></div>
 *
 */
define([
    "app"
], function (app) {
    app.directive('mksDraggable', [
        "$document",
        "$window",
        function ($document, $window) {
            function makeDraggable(scope, element, attr) {
                var startX = 0;
                var startY = 0;

                var x = parseInt(attr.initPosX);
                var y = parseInt(attr.initPosY);

                // 为元素自动添加绝对定位属性
                element.css({
                    position: 'absolute',
                    cursor: 'move',
                    left: x + "px",
                    top: y + "px"
                });

                // 鼠标按下时,记录鼠标按下时在元素内部的位置
                element.on('mousedown', function (event) {
                    event.preventDefault();

                    // 记录位置
                    startX = event.clientX - x;
                    startY = event.clientY - y;

                    // 绑定事件到dom
                    $document.on('mousemove', mousemove);
                    $document.on('mouseup', mouseup);
                });

                // 鼠标移动时,记录鼠标轨迹,同时同步到元素的css属性上
                function mousemove(event) {
                    y = event.clientY - startY;
                    x = event.clientX - startX;

                    element.css({
                        top: y + 'px',
                        left: x + 'px'
                    });
                }

                // 鼠标松开时,解除事件绑定
                function mouseup() {
                    $document.unbind('mousemove', mousemove);
                    $document.unbind('mouseup', mouseup);
                }
            }

            return {
                link: makeDraggable
            };
        }]);
});